import { Fragment, useState } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { TabBar } from "antd-mobile";
import {
  UnorderedListOutline,
  SearchOutline,
  AppstoreOutline,
  SetOutline,
} from "antd-mobile-icons";

import styles from "./style.module.scss";

const Main = () => {
  const [activeKey, setActiveKey] = useState("/home");
  const navigate = useNavigate();

  return (
    <Fragment>
      <Outlet />

      <div className={styles.bottom}>
        <TabBar
          safeArea
          className="navbar"
          activeKey={activeKey}
          onChange={(key) => {
            setActiveKey(key);
            navigate(key);
          }}
        >
          <TabBar.Item key="/" title="任务" icon={<UnorderedListOutline />} />
          <TabBar.Item key="/search" title="搜索" icon={<SearchOutline />} />
          <TabBar.Item key="/about" title="关于" icon={<AppstoreOutline />} />
          <TabBar.Item key="/settings" title="设置" icon={<SetOutline />} />
        </TabBar>
      </div>
    </Fragment>
  );
};

export default Main;
